<template>
  <div class="top-bar">
    <div class="wrap">
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <div class="right">
        <ul>
          <li @click="hdClick()">
            <img :src="userInfo.headImg" alt="" />
          </li>
          <li @click="hdClick()">用户名：{{ userInfo.nickName }}</li>
          <li>我的积分：{{ userInfo.coin }}</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li @click="showLogin" v-if="!isLoginde">登录</li>
          <li v-if="isLoginde">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { WeixinLoginAPI } from "@/request/api";
export default {
  data() {
    return {};
  },
  created() {
    console.log("111111", this.$route);

    setTimeout(async () => {
      let mycode = this.$route.query.code;
      //1.清除地址栏上的code(路由跳转到当前路由即可)
      this.$router.push(this.$route.path);
      if (mycode) {
        let res = await WeixinLoginAPI({
          code: mycode,
        });
        // console.log("2222", this.$route.query.code);

        console.log(res.code);
        if (res.code == 0) {
          //2.关闭登录窗口
          // this.showLogin();
          //3.保存token值到localstorage中
          localStorage.setItem("x-auth-token", res["x-auth-token"]);
          //4.登录状态值切换，这个值影响页面信息的展示:比如用户的信息
          this.chanIsloginde();
          //5
          this.asynChanIsShowToast({
            msg: "登录成功！",
            type: "success",
          });
          // 6.获取用户信息
          this.asyncChanUserInfo();
        } else if (res.code == 400) {
          //二维码过期
          //1.提示用户重新登录
          this.asynChanIsShowToast({
            msg: "二维码过期，请刷新重新获取二维码登录",
            type: "warning",
          });
          //2.打开登录窗口
          this.showLogin();
        } else if (res.code == 407) {
          // console.log("407", res);
          //用户这次扫码的微信没有绑定手机号

          //1.提示用户，微信未绑定手机号，需要通过手机号登录来绑定这个微信
          this.asyncChangeIsShowToast({
            msg: res.message,
            type: "warning",
          });
          //2.打开登录窗口
          this.showLogin();
          //3保存uuid，已使之后登录的时候，能够获取携带这个uuid
          localStorage.setItem("uuid", res.uuid);
        }
      } else {
        let myToken = localStorage.getItem("x-auth-token");

        this.chanIslogindeToFalse(Boolean(myToken));
        if (myToken) {
          //有登录的情况下，获取用户信息
          this.asyncChanUserInfo();
        } else {
          //没有登录的情况下，用户信息初始化
          this.initUserInfo();
        }
      }
    }, 300);
  },
  computed: {
    ...mapState({
      isLoginde: (state) => state.loginState.isLoginde,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  methods: {
    ...mapMutations({
      showLogin: "handleLoginModal/showLogin",
      chanIsloginde: "loginState/chanIsloginde",
      chanIslogindeToFalse: "loginState/chanIslogindeToFalse",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asynChanIsShowToast: "handleToast/asynChanIsShowToast",
      asyncChanUserInfo: "userInfo/asyncChanUserInfo",
    }),
    hdClick() {
      this.asynChanIsShowToast({
        //请先登录
        //登录成功
        //登录失败
        msg: "请先登录",
        // warning 警告
        // success 成功
        // danger 失败
        type: "warning",
      });
    },
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        let myToken = localStorage.getItem("x-auth-token");
        if (!myToken) {
          this.chanIslogindeToFalse(false);
          this.initUserInfo();

          return;
        }
      },
    },
  },
};
</script>

<style lang = "less" scoped>
@import url("../assets/style/global.less");
.top-bar {
  font-size: 14px;
  height: 40px;
  background-color: #242b39;
  color: #ffefef;
  .wrap {
    height: 40px;
    /* background-color: #cfc; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
    }
    .right {
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        :first-child {
          width: 26px;
          height: 26px;
          background: #7d8696;
          margin-left: 1px;
          border-radius: 13px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        :last-child {
          width: 124px;
          height: 40px;
          background: @basecolor;
          text-align: center;
          line-height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          img {
            background: @basecolor;
          }
          b {
            width: 22px;
            height: 22px;
            background: #fd604d;
            border-radius: 11px;
          }
        }
        :nth-child(2) {
          margin-left: 4px;
        }
        li {
          cursor: pointer;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>